<!--role  -->
<template>
  <div class="role">
    <div class="search_cpm">
      <page-search :search-form-config="searchFormConfig" @searchBtnClick="handleSearch" @resetBtnClick="handleReset"
        ref='mySearchRef'>
      </page-search>
    </div>
    <div class="table_cpm">
      <page-table ref="myTableRef" pageName="role" :table-config="tableConfig" @createOrEdit="handleCreateOrEdit"
        @exportData="handleExportData" @importData="handleImportData">
      </page-table>
    </div>

    <div class="modal_cpm">
      <page-modal :modal-form-config="modalFormConfigRef" :default-info='defaultInfo' :other-info="otherInfo"
        page-name="role" ref='pageModalRef'>
        <!-- 树形控件 -->
        <div class="role_tree">
          <el-tree ref="elTreeRef" :data="menusTreeData" show-checkbox node-key="id" :props="defaultProps"
            @check='handleCheck' />
        </div>
      </page-modal>
    </div>
    <export-data ref="exportDataRef" :dataList="dataList" :excel-config="ROLE_EXPORT"></export-data>
    <import-data ref="importDataRef" :excelConfig="ROLE_EXPORT" @onSuccess="handleOnSuccess"></import-data>
  </div>

</template>
<script setup lang='ts' >
import { computed, ref, nextTick } from "vue"
import { searchFormConfig } from "./config/search.config"
import { tableConfig } from "./config/table.config"
import { modalFormConfig } from "./config/modal.config"
import { ROLE_EXPORT } from "./config/export.config"
import { usePageSearch, usePageModal, useExport } from "@/hooks"

import { menuToLeafNodes } from "@/utils/menu-map"

import { useStore } from "@/store"
import { ElTree } from "element-plus"
const store = useStore()

// 树形控件的配置
const defaultProps = {
  children: 'children',
  label: 'menu_name',
  disabled: (val: any) => val.status === 0
}

let [handleSearch, handleReset, myTableRef, mySearchRef] = usePageSearch()
const modalFormConfigRef = computed(() => {
  return modalFormConfig
})
const elTreeRef = ref<InstanceType<typeof ElTree>>()
const callbackEdit = (val: any) => {
  let RoleMenuIds = menuToLeafNodes(val.RoleMenu)
  // 注意渲染时机
  nextTick(() => {
    elTreeRef.value?.setCheckedKeys(RoleMenuIds, false)
  })
  pageModalRef.value.dialogTitle = '修改角色信息'
}


const callbackCreated = () => {

  pageModalRef.value.dialogTitle = '添加角色信息'
}

let [handleCreateOrEdit, defaultInfo, pageModalRef] = usePageModal(callbackEdit, callbackCreated)

const menusTreeData = computed(() => store.state.entireMenus)
let otherInfo = ref({})
const handleCheck = (v1: any, v2: any) => {
  let { checkedKeys, halfCheckedKeys } = v2
  otherInfo.value = { associateIds: [...halfCheckedKeys, ...checkedKeys] }
}


let { handleExportData,
  exportDataRef,
  dataList,
  importDataRef,
  handleOnSuccess,
  handleImportData, } = useExport('role', store)
</script>
<style lang='less' scoped>
.table_cpm {
  margin-top: 15px;
}

.role_tree {
  margin-left: 9px;
  margin-top: -27px;
}
</style>
